<template>
  <div class="Stock">
    <el-row>
      <el-col :span="24" class="TextAlignL">
        <h2 style="color: #666;">采购交货合格率</h2>
      </el-col>
      <el-col :span="24">
        <el-form ref="conditionForm" :model="conditionForm" label-position="left" label-width="80px">
          <el-row :gutter="20" type="flex" class="row-bg">
            <el-col :span="12" :offset="0">
              <el-form-item label="日期" label-width="50px">
                <el-date-picker style="width: 100%"
                  v-model="createTimeRange"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="onDateChange">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="备货代码">
                <el-input v-model="conditionForm.FNumber" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="备货单号">
                <el-input v-model="conditionForm.fbillno" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="名称">
                <el-input v-model="conditionForm.FName" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="" style="margin-top: 7px;">
              <el-button size="mini" type="primary" @click="search">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24" style="width: 100%;height: 4px; border-bottom: 1px dashed #ccc;">
      </el-col>
      <el-col :span="24" class="MarginT_20">
        <el-table id="out-table"
          :data="dataList"
          v-loading="listLoading"
          style="width: 100%">
          <el-table-column
            type="index"
            fixed="left"
            width="50">
          </el-table-column>
          <el-table-column
            property="FSupply"
            label="供应商"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FEmp"
            label="采购员"
            width="120"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FNumber"
            label="物料代码"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FName"
            label="物料名称"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="FModel"
            label="规格"
            width="150"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="ftext1"
            label="订单货批次"
            width="100">
          </el-table-column>
          <el-table-column
            property="ftext2"
            label="订货数量"
            width="100"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="ftext3"
            label="订货金额"
            width="120"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="ftext4"
            label="退货批次"
            width="100"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="ftext5"
            label="特采批次"
            width="120"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="ftext6"
            label="批次特采率"
            width="120"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="ftext7"
            label="批次合格率（不含特采）"
            width="120"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="ftext8"
            label="件次合格率（不含特采）"
            width="120"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="ftext9"
            label="件次特采率"
            width="120"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="ftext10"
            label="金额合格率（不含特采）"
            width="120"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            property="ftext11"
            label="金额特采率"
            width="120"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24" class="TextAlignR MarginT_20" v-if="dataList.length > 0">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="curPage"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="sum">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getQueryParams } from '../util/utils'

export default {
  name: 'purchaseDeliveryQualificationRate',
  data () {
    return {
      listLoading: false,
      dataList: [],
      createTimeRange: '',
      conditionForm: {
        fsupplierid: null,
        FSDate: '',
        FEDate: ''
      },
      curPage: 1,
      sum: 0,
      curRow: null
    }
  },
  computed: {
    ...mapState({
      fsupplierid: state => state.fsupplierid
    })
  },
  components: {
  },
  created () {
    this.search()
  },
  methods: {
    onDateChange (value) {
      this.conditionForm.FSDate = value ? value[0] : ''
      this.conditionForm.FEDate = value ? value[1] : ''
    },
    search () {
      this.curPage = 1
      this.getStockList()
    },
    handleCurrentChange () {
      this.getStockList()
    },
    getStockList () {
      this.listLoading = true
      let formatData = getQueryParams({...this.conditionForm, ...{fsupplier: this.fsupplierid}}, {current: this.curPage, pageSize: 10})
      this.Http.get('/yw_supplier_user/ywSupplierUser/poorderHgList', formatData
      ).then(res => {
        if (res.data.success) {
          this.dataList = res.data.result.records
          this.sum = res.data.result.total
          this.listLoading = false
        }
      }).catch((error) => {
        console.log(error)
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
@Padding: 24px;
.Stock{
  width: calc(100% - 2*@Padding);
  background: #fff;
  padding: 0 @Padding @Padding @Padding;
  margin-top: @Padding;
}
</style>
